<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/view/modules/sys/include/taglib.jsp"%>
<%@ include file="/WEB-INF/view/modules/sys/include/head.jsp"%>
<div class="main-container">
    <div class="padding-md">
        <div class="smart-widget">
            <div class="smart-widget-header">
                文章显示
                <span class="smart-widget-option">
								<span class="refresh-icon-animated">
									<i class="fa fa-circle-o-notch fa-spin"></i>
								</span>
	                            <a href="#" class="widget-toggle-hidden-option">
	                                <i class="fa fa-cog"></i>
	                            </a>
	                            <a href="#" class="widget-collapse-option" data-toggle="collapse">
	                                <i class="fa fa-chevron-up"></i>
	                            </a>
	                            <a href="#" class="widget-refresh-option">
	                                <i class="fa fa-refresh"></i>
	                            </a>
	                            <a href="#" class="widget-remove-option">
	                                <i class="fa fa-times"></i>
	                            </a>
	                        </span>
            </div>
            <div class="smart-widget-inner">
                <div class="smart-widget-hidden-section">
                    <ul class="widget-color-list clearfix">
                        <li style="background-color:#20232b;" data-color="widget-dark"></li>
                        <li style="background-color:#4c5f70;" data-color="widget-dark-blue"></li>
                        <li style="background-color:#23b7e5;" data-color="widget-blue"></li>
                        <li style="background-color:#2baab1;" data-color="widget-green"></li>
                        <li style="background-color:#edbc6c;" data-color="widget-yellow"></li>
                        <li style="background-color:#fbc852;" data-color="widget-orange"></li>
                        <li style="background-color:#e36159;" data-color="widget-red"></li>
                        <li style="background-color:#7266ba;" data-color="widget-purple"></li>
                        <li style="background-color:#f5f5f5;" data-color="widget-light-grey"></li>
                        <li style="background-color:#fff;" data-color="reset"></li>
                    </ul>
                </div>
                <div class="smart-widget-body">
                    <div id="div" style="margin: auto">
                        <%--<span><a href="${ctx}/article/returnShow">返回添加界面</a></span>--%>
                        <form action="${ctx}/article/Serach" method="get">
                            <input name="title" type="text">
                            <input type="submit" value="搜索">
                        </form>
                        <c:if test="${message ne null}">
                            <span style="color: red">没有搜索符合的条件</span>
                        </c:if>
                    </div>

                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>标题</th>
                            <th>关键字</th>
                            <th>文章描述</th>
                            <th>所属类别</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${page.list}" var="article">
                            <tr>
                                <td hidden>${article.id}</td>
                                <td>${article.title}</td>
                                <td>${article.keywords}</td>
                                <td>${article.description}</td>
                                <td>${article.categoryId}</td>
                                <td hidden>${article.content}</td>

                                <td><a href="${ctx}/article/delete?id=${article.id}" onclick="javascript:return p_del()">删除</a> | <a href="javascript:void(0)"   claass="add-new-event" onclick="update()">修改</a></td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <div style="text-align:center">
                        <ul class="pagination pagination-lg">
                            <li> <%--上一页 hasPreviousPage布尔值是否有上一页，prePage上一页页面--%>
                                <c:if test="${page.hasPreviousPage}">
                                    <a href="${ctx}/article/findAll0?pageNum=${page.prePage}&pageSize=${page.pageSize}">«</a>
                                </c:if></li>
                            <%--navigatepageNums 集合所有页码  --%>
                            <c:forEach items="${page.navigatepageNums}" var="nav">
                                <c:if test="${nav == page.pageNum}">
                                    <li style="font-weight: bold;"><a href="javascript:;">${nav}</a></li>
                                </c:if>
                                <c:if test="${nav != page.pageNum}">
                                    <li><a href="${ctx}/article/findAll0?pageNum=${nav}&pageSize=${page.pageSize}">${nav}</a></li>
                                </c:if>
                            </c:forEach>
                            <%--hasNextPage 布尔值判断是否有下一页 nextPage下一页的页码--%>
                            <c:if test="${page.hasNextPage}">
                                <li><a href="${ctx}/article/findAll0?pageNum=${page.nextPage}&pageSize=${page.pageSize}">»</a></li>
                            </c:if>
                        </ul>
                    </div>
                    <div class="modal fade" id="addNewEventModal" aria-hidden="true" >
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                                    <h4 class="modal-title" id="myModalLabel">修改文章</h4>
                                </div>
                                <form action="${pageContext.request.contextPath}/article/update" method="post" id="form">
                                    <div class="modal-body">
                                        <input type="hidden" name="id" id="id"/>
                                        <div class="form-group">
                                            <label class="control-label col-lg-3">标题</label>
                                            <div class="col-lg-9">
                                                <input type="text" name="title" id="title" class="form-control input-sm"  >
                                            </div><!-- /.col -->
                                        </div><!-- /form-group -->
                                        <div class="form-group">
                                            <label class="control-label col-lg-3">关键字</label>
                                            <div class="col-lg-9">
                                                <input type="text"  class="form-control input-sm" id="keywords" name="keywords"  >
                                            </div><!-- /.col -->
                                        </div><!-- /form-group -->
                                        <div class="form-group">
                                            <label class="control-label col-lg-3">文章描述</label>
                                            <div class="col-lg-9">
                                                <input type="text" class="form-control input-sm" id="description" name="description"  >
                                            </div><!-- /.col -->
                                        </div><!-- /form-group -->
                                        <div class="form-group">
                                            <label class="control-label col-lg-3">所属类别</label>

                                            <div class="col-lg-9"> <select class="form-control" name="categoryId">
                                                <option value="010010001" selected >科技</option>
                                                <option value="010010002" selected>人文</option>
                                                <option value="010010003">地理</option>
                                                <option value="010010004">环境</option>
                                            </select>
                                            </div><!-- /.col -->
                                        </div><!-- /form-group -->
                                        <div class="form-group">
                                            <label class="control-label col-lg-3">内容</label>
                                            <div class="col-lg-9">
                                                <!-- 加载编辑器的容器 -->
                                                <script id="container" name="content"  type="text/plain">
                                    </script>
                                            </div><!-- /.col -->
                                        </div><!-- /form-group -->
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                            <input  type="submit" value="确认修改" class="btn btn-success" />
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- ./smart-widget-inner -->
        </div>
    </div>
</div>
<%@include file="/WEB-INF/view/modules/sys/include/footerlib.jsp"%>
<%--<script>
    /**
     * 重写确认框 fun:函数对象 params:参数列表， 可以是数组
     */
    function fun () {
        location.href="${ctx}/article/delete?id=${article.id}";
    }

    function confirm(fun, params) {
        if ($("#myConfirm").length > 0) {
            $("#myConfirm").remove();
        }
        var html = "<div class='modal fade' id='myConfirm' >"
                + "<div class='modal-backdrop in' style='opacity:0; '></div>"
                + "<div class='modal-dialog' style='z-index:2901; margin-top:60px; width:400px; '>"
                + "<div class='modal-content'>"
                + "<div class='modal-header'  style='font-size:16px; '>"
                + "<span class='glyphicon glyphicon-envelope'>&nbsp;</span>信息！<button type='button' class='close' data-dismiss='modal'>"
                + "<span style='font-size:20px;  ' class='glyphicon glyphicon-remove'></span><tton></div>"
                + "<div class='modal-body text-center' id='myConfirmContent' style='font-size:18px; '>"
                + "是否确定要删除？"
                + "</div>"
                + "<div class='modal-footer ' style=''>"
                + "<button class='btn btn-danger ' id='confirmOk' >确定<tton>"
                + "<button class='btn btn-info ' data-dismiss='modal'>取消<tton>"
                + "</div>" + "</div></div></div>";
        $("body").append(html);

        $("#myConfirm").modal("show");

        $("#confirmOk").on("click", function() {
            $("#myConfirm").modal("hide");
            fun(params); // 执行函数
        });
    }
</script>--%>
<script>
    function p_del() {
        var msg = "您真的确定要删除吗?";
        if (confirm(msg)==true){
            return true;
        }else{
            return false;
        }
    }
</script>
<script>
    //绑定模态框展示的方法
    function update(obj) {
        var tds=$(obj).parent().parent().find('td');
        $('#id').val(tds.eq(0).text());
        $('#title').val(tds.eq(1).text());
        $('#keywords').val(tds.eq(2).text());
        $('#description').val(tds.eq(3).text());
        $('#categoryId').val(tds.eq(4).text());
        var ue = UE.getEditor('container',{toolbars: [
            ['fullscreen', 'source', 'undo', 'redo'],
            ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
        ], autoHeightEnabled: true,
            autoFloatEnabled: true});
        ue.setContent(tds.eq(5).text());
        $('#').modal('show');
    }
</script>
<script>
    $(document).ready(function() {
        $("#form").validate({
            rules:{
                title: "required",
                content :"required",
                keywords:{required:true}
            },
            messages: {
                title:"请输入标题",
                content :"请输入发表内容",
                keywords:{
                    required:"关键词不能为空"
                }
            }
        })
    })
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="${ctxStatic}/ueditor1_4_3_3-utf8-jsp/utf8-jsp/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="${ctxStatic}/ueditor1_4_3_3-utf8-jsp/utf8-jsp/ueditor.all.js"></script>
</body>
</html>

